<template>
  <!-- 电催案件管理-出催案件池-页面 -->
  <section class="page tel-settle-case-manage">
    <data-form :rules="rules" :model="model" @onSearch="refreshData" @handleResetForm="handleResetForm" :page="pageService">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model="model.personalNo" ></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="model.personalName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model="model.idCard" :maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="还款日" prop="payDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.payDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.payDate"></number-range>
          <!-- <el-input type="number" v-model="model.payDate"></el-input> -->
        </el-form-item>
        <el-form-item label="账单日" prop="billDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="model.billDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="model.billDate"></number-range>
          <!-- <el-input type="number" v-model="model.billDate"></el-input> -->
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="model.mobileNo" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model="model.productNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model="model.queueCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入催原因码" prop="reasonCode">
          <el-select v-model="model.reasonCode" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('ReasonCode')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="AT" prop="at">
          <el-input v-model="model.at" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="CT" prop="ct">
          <el-input v-model="model.ct" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="出催时间" prop="bankcDate">
          <el-date-picker type="daterange" :editable="false" v-model="model.bankcDate" placeholder="选择时间" clearable>
          </el-date-picker>
          <!-- <el-input v-model="model.bankcDate"></el-input> -->
        </el-form-item>
        <el-form-item label="机构号" prop="companyCode">
          <el-input v-model="model.companyCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="组别号" prop="deptNo">
          <el-input v-model="model.deptNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="经办代号" prop="currentCollectorCode">
          <el-input v-model="model.currentCollectorCode" :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService" ref="data-box">
      <template slot="caseTotalInfo">
        <case-total-info :caseInfoData="caseTotalData" />
      </template>
      <template slot="columns">
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
          <template slot-scope="scope">
            <a @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalNo" label="客户号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="idCard" label="证件号" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.payDate)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.billDate)" show-overflow-tooltip sortable>
        </el-table-column> -->
        <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip sortable>
        </el-table-column>
        <el-table-column prop="reasonCode" label="入催原因码" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dictConvert(row.reasonCode, 'ReasonCode')" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productNo" label="产品编号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="queueCode" label="队列代码" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="companyCode" label="机构号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="deptNo" label="组别号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="currentCollectorCode" label="经办代号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="bankcDate" label="出催时间" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.dateTimeFormat(row.bankcDate)" show-overflow-tooltip sortable>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { Getter, namespace, State } from "vuex-class";
import { PageService } from "~/utils/page.service";
import SelectDepartment from "~/components/business-component/select-department.vue";
import NumberRange from "~/components/common/number-range.vue";
import { TelCaseManageService } from "~/services/domain-service/tel-case-manage.service";
import { ApplyType, CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";
import CaseTotalInfo from "~/components/common/case-total-info.vue";
import { Prop } from "vue-property-decorator";
import { LegalCaseManageService } from "~/services/domain-service/legal-case-manage.service";
const CollectionExecutionModule = namespace("collection-execution");

@Auth(205)
@Layout("workspace")
@Component({
  components: {
    NumberRange,
    GetLabelName,
    SelectDepartment,
    CaseTotalInfo
  }
})
export default class TelSettleCaseManage extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(TelCaseManageService)
  private telCaseManageService: TelCaseManageService;
  @CollectionExecutionModule.Mutation private updatePersonalType;
  @Dependencies(LegalCaseManageService) private legallyCaseManageService: LegalCaseManageService;
  @Getter private callDepartmentData;
  @State private principalList: any;
  @Prop() private queueType;
  private caseTotalData: any = {};
  private rules: any = {
    mobileNo: [{ validator: this.$validator.phoneNumber, trigger: "change" }],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };
  private model: any = {
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    payDate: { max: "", min: "" },
    billDate: { max: "", min: "" },
    bankcDate: { max: "", min: "" },
    deptId: "",
    companyCode: '',
    at: "",
    ct: "",
    personalNo: "",
    productNo: "",
    queueCode: "",
    reasonCode: "",
    deptNo: "",
    currentCollectorCode: ""
  };
  private dataSet: any[] = [];
  private selectionList: any[] = [];

  private created () {
    this.refreshData();
  }

  private refreshData () {
    // 法诉
    if(this.queueType === 'SETTLE') {
      if (
        this.model.caseNumber &&
        this.$validator.regex.isChineseComma.test(this.model.caseNumber)
      )
        return this.$message.error("请用英文逗号！");
      this.getCaseAmount();
      this.legallyCaseManageService
        .settleCasePool(this.paramsHandler(), this.pageService)
        .subscribe(data => {
          this.dataSet = data;
        });
    } else {
      if (
        this.model.caseNumber &&
        this.$validator.regex.isChineseComma.test(this.model.caseNumber)
      )
        return this.$message.error("请用英文逗号！");
      this.getCaseAmount();
      this.telCaseManageService
        .settleCasePool(this.paramsHandler(), this.pageService)
        .subscribe(data => {
          this.dataSet = data;
        });
    }
  }

  /**
   * 表单范围输入框重置
   */
  private handleResetForm () {
    this.model.payDate = { min: "", max: "" };
    this.model.billDate = { min: "", max: "" };
    this.model.bankcDate = { min: "", max: "" };
  }

  private paramsHandler () {
    const params = { ...this.model };
    // params.payDateMax = this.$filter.dateRanageFormat(this.model.payDate).end;
    // params.payDateMin = this.$filter.dateRanageFormat(this.model.payDate).start;
    // params.billDateMax = this.$filter.dateRanageFormat(this.model.billDate).end;
    // params.billDateMin = this.$filter.dateRanageFormat(this.model.billDate).start;
    params.payDateMax = this.model.payDate.max;
    params.payDateMin = this.model.payDate.min;
    params.billDateMax = this.model.billDate.max;
    params.billDateMin = this.model.billDate.min;
    params.bankcDateMax = this.$filter.dateRanageFormat(this.model.bankcDate).end;
    params.bankcDateMin = this.$filter.dateRanageFormat(this.model.bankcDate).start;
    delete params.payDate;
    delete params.billDate;
    delete params.bankcDate;
    return params;
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage (row) {
    this.updatePersonalType(row.personalType);

    if(this.queueType === 'SETTLE') {
      this.$router.openCaseDetail(row.id, {
        menuChannel: MENU_CHANNEL.Legal_settle,
        hiddenAction: true,
        hiddenRemark: true
      });
    } else {
      this.$router.openCaseDetail(row.id, {
        menuChannel: MENU_CHANNEL.Tel_settle,
        hiddenAction: true,
        hiddenRemark: true
      });
    }
  }

  /**
   * 获取机构id
   */
  private getcupoName () {
    this.model.deptId =
      this.model.deptIds.length > 0
        ? this.model.deptIds[this.model.deptIds.length - 1]
        : "";
  }
  /**
   * 统计查询
   */
  private getCaseAmount () {
    // 法诉
    if(this.queueType === 'SETTLE') {
      this.legallyCaseManageService
        .settleCasePoolAmount(this.paramsHandler())
        .subscribe(data => {
          this.caseTotalData = data;
        });
    } else {
      // 电催
      this.telCaseManageService
        .settleCasePoolAmount(this.paramsHandler())
        .subscribe(data => {
          this.caseTotalData = data;
        });
    }
  }
}
</script>

<style lang="less" scoped></style>
